<template>
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px; width: 100%"
    :class="{underline:isRoot}"
  >
    <el-col>
      <span
        :class="{fw:isRoot,son:!isRoot&&treeNode.children&&node.expanded,sons:!isRoot&&treeNode.children&&!node.expanded ,noson:!isRoot&&!treeNode.children}"
      >{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row
        type="flex"
        align="middle"
      >
        <el-col style="flex: 6">{{ treeNode.manager }}</el-col>
        <el-col style="flex: 3">
          <el-dropdown @command="operateDepts">
            <span>
              操作<i class="el-icon-arrow-down" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item
                v-if="!isRoot"
                command="edit"
              >编辑部门</el-dropdown-item>
              <el-dropdown-item
                v-if="!isRoot"
                command="del"
              >删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartments } from '@/api/departments'
export default {
  props: {
    treeNode: {
      type: Object,
      required: true
    },
    isRoot: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: () => { }
    }
  },
  methods: {
    operateDepts (type) {
      if (type === 'add') {
        // 添加子部门
        this.$emit('addDepts', this.treeNode)
      } else if (type === 'edit') {
        // 编辑部门
        this.$emit('editDepts', this.treeNode)
      } else {
        // 删除部门
        this.$confirm('确定要删除该部门吗？').then(() => {
          return delDepartments(this.treeNode.id)
        }).then(() => {
          this.$emit('delDepts')
          this.$message.success('删除成功！')
        })
      }
    }
  }
  // watch: {
  //   node: {
  //     deep: true,
  //     handler (val) {
  //       console.log(val)
  //     }
  //   }
  // }
}
</script>

<style>
@font-face {
  font-family: "icomoon";
  src: url("~@/icons/fonts/icomoon.eot?trdoy1");
  src: url("~@/icons/fonts/icomoon.eot?trdoy1#iefix")
      format("embedded-opentype"),
    url("~@/icons/fonts/icomoon.ttf?trdoy1") format("truetype"),
    url("~@/icons/fonts/icomoon.woff?trdoy1") format("woff");
  /* url("~@/icons/fonts/icomoon.svg?trdoy1#icomoon") format("svg"); */
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.underline {
  border-bottom: 1px solid #ccc;
  margin-bottom: 18px;
}
.fw {
  padding-left: 20px;
  position: relative;
  font-weight: 700;
}
.fw::before {
  font-family: "icomoon" !important;
  position: absolute;
  content: "\e900";
  left: 0;
  font-weight: normal;
}
.son {
  position: relative;
}
.son::before {
  font-family: "icomoon" !important;
  position: absolute;
  content: "\e902";
  left: -16px;
  background-color: #fff;
  font-weight: normal;
}
.sons {
  position: relative;
}
.sons::before {
  font-family: "icomoon" !important;
  position: absolute;
  content: "\e901";
  left: -16px;
  background-color: #fff;
  font-weight: normal;
}
.noson {
  position: relative;
}
.noson::before {
  font-family: "icomoon" !important;
  position: absolute;
  content: "\e903";
  left: -13px;
  background-color: #fff;
  font-weight: normal;
}
</style>
